<template>
  <section class="container-fluid space-y-16 text-white">
    <!-- 分类 -->
    <div id="categories" class="space-y-6">
      <div>
        <p class="kicker mb-3">CATEGORIES</p>
        <h2 class="text-3xl font-bold tracking-tight">水果分类</h2>
      </div>
      <div class="grid grid-cols-2 md:grid-cols-6 gap-4">
        <button
          v-for="c in categories"
          :key="c.id"
          @click="selectCategory(c.id)"
          :class="[
            'px-4 py-4 text-sm rounded-2xl ring-1 transition',
            selectedCategory===c.id ? 'ring-white/30 bg-white/[0.07]' : 'ring-white/10 hover:ring-white/30'
          ]"
        >
          <div class="font-medium">{{ c.name }}</div>
          <div class="text-xs text-white/50">{{ c.desc }}</div>
        </button>
      </div>
    </div>

    <!-- 今日推荐列表 -->
    <div id="products" class="space-y-6">
      <div>
        <p class="kicker mb-3">TODAY'S PICKS</p>
        <div class="flex items-center justify-between">
          <h2 class="text-3xl font-bold tracking-tight">今日推荐</h2>
          <div class="flex items-center gap-2">
            <!-- 已移除排序选择，下发数据由后端决定顺序；仅保留搜索输入 -->
            <input v-model="keyword" placeholder="搜索水果" class="input-control" />
          </div>
        </div>
      </div>

      <div v-if="loading" class="grid grid-cols-2 md:grid-cols-4 gap-6">
        <div v-for="n in 8" :key="n" class="card-minimal overflow-hidden animate-pulse">
          <!-- 骨架图：统一使用 3:2 比例，避免加载完成后布局跳动 -->
          <div class="relative w-full pt-[66%] bg-white/5 rounded-md overflow-hidden"></div>
          <div class="p-5 space-y-2">
            <div class="h-4 bg-white/10 rounded"></div>
            <div class="h-3 bg-white/10 rounded w-2/3"></div>
            <div class="h-9 bg-white/10 rounded"></div>
          </div>
        </div>
      </div>

      <div v-else class="grid grid-cols-2 md:grid-cols-4 gap-6">
        <article v-for="p in filteredProducts" :key="p.id" class="relative card-minimal overflow-hidden group">
          <router-link :to="`/product/${p.id}`" class="block">
            <!-- 统一图片容器：3:2 比例，绝对定位填充，悬浮微缩放提升质感 -->
            <div class="relative w-full pt-[66%] bg-white/5 overflow-hidden rounded-md">
              <img :src="p.cover || '/images/apple.svg'" :alt="p.name"
                   class="absolute inset-0 w-full h-full object-cover object-center transition-transform duration-300 ease-out group-hover:scale-[1.03] select-none"
                   loading="lazy" decoding="async" referrerpolicy="no-referrer" draggable="false"
                   @error="onImgError" />
            </div>
            <div class="p-5 space-y-1">
              <div class="flex items-center justify-between">
                <h3 class="font-semibold group-hover:text-emerald-400">{{ p.name }}</h3>
                <span class="text-emerald-400 font-bold">￥{{ p.price }}</span>
              </div>
              <div class="text-xs text-white/50">{{ p.brief }}</div>
              <button class="btn-outline w-full mt-3" @click.prevent="addToCart(p)">加入购物车</button>
            </div>
          </router-link>
        </article>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import toast from '../composables/toast'
import { getProducts } from '../api/ProductsAPI.js'
import {getCategories} from "../api/CategoryApi.js";

// 防抖函数：限制高频触发的回调执行频率，等待最后一次触发后再执行，避免输入搜索时频繁过滤导致性能抖动
function debounce(fn, wait=300){
  let t
  return function(...args){ clearTimeout(t); t = setTimeout(()=>fn.apply(this,args), wait) }
}

const categories = ref([])

const products = ref([])
// 已移除前端排序 sortKey：排序规则交由后端决定，前端仅做筛选与展示
const keyword = ref('')
const loading = ref(true)
const selectedCategory = ref('')

// 首次挂载：改为从后端拉取数据（取 8 条作为“今日推荐”）
onMounted(async () => {
  try {
    const resp = await getProducts({ pageNum: 1, pageSize: 8 })
    // axios 响应结构：resp.data 是 ResponseUtil；真正的分页数据在 resp.data.data
    const page = resp?.data?.data
    products.value = page?.list || []
  } finally {
    loading.value = false
  }
  await loadCategories()
})

// 从后端获取类目列表
// 定义一个异步函数用于加载类目数据
async function loadCategories() {
  try {
    // 调用getCategories()方法获取类目数据，await表示等待异步操作完成
    const resp = await getCategories()
    // 在控制台打印获取到的原始响应数据，用于调试
    console.log(resp)
    // 直接赋值的代码
    // categories.value = resp.data.data

    // 从响应中提取data字段（使用可选链操作符?.避免null/undefined错误）
    const body = resp?.data
    // 处理数据：如果body.data是数组则使用它，否则使用空数组
    const rows = Array.isArray(body?.data) ? body.data : []

    // 如果没有数据（数组长度为0）
    if (!rows.length) {
      // 将类目设置为默认类目
      categories.value = DEFAULT_CATEGORIES
      // 在控制台警告：后端返回空类目，已使用默认类目
      console.warn('后端返回空类目，已回退默认类目')
      return
    }

    // 有数据时，将后端返回的类目数据转换为前端需要的格式
    categories.value = rows.map(c => ({
      id: String(c.categoryId ?? ''),  // 确保id是字符串类型，没有则为空
      name: c.name ?? '',              // 名称，没有则为空
      desc: c.desc ?? ''               // 描述，没有则为空
    }))
    // 在控制台打印转换后的类目数据，用于调试
    console.log('categories =>', categories.value)
  } catch (err) {
    // 如果发生错误（如网络请求失败）
    console.error('加载类目失败：', err)
    // 请求失败时也使用默认类目，避免页面空白
    categories.value = DEFAULT_CATEGORIES
  }
}
const innerKeyword = ref('')
// 将输入框的关键字通过防抖写入 innerKeyword，减少频繁计算
const applyKeyword = debounce((v)=> { innerKeyword.value = v }, 300)
watch(keyword, (v)=> applyKeyword(v))

// 过滤：仅按关键字与类目进行筛选；不再在前端进行排序，保持后端/原始顺序
const filteredProducts = computed(() => {
  const kw = innerKeyword.value.trim()
  let list = kw ? products.value.filter(p => (p.name||'').includes(kw) || (p.brief||'').includes(kw)) : products.value.slice()
  if (selectedCategory.value) list = list.filter(p => categoryOf(p) === selectedCategory.value)
  return list
})

// 将商品加入购物车：合并数量、写入 localStorage，并通过 CustomEvent 通知其他组件更新
function addToCart(p){
  const raw = JSON.parse(localStorage.getItem('cart')||'[]')
  // 统一主键：优先使用 productId，其次使用 id；转为字符串，避免数值/字符串不一致导致查找失败
  const pid = String(p?.productId ?? p?.id ?? '')
  if(!pid){ toast.error('商品ID缺失，无法加入购物车'); return }
  const idx = raw.findIndex(i => String(i.id) === pid)
  if (idx > -1) {
    raw[idx].qty += 1
  } else {
    raw.push({ id: pid, name: p.name, price: Number(p.price)||0, cover: p.cover, qty: 1 })
  }
  localStorage.setItem('cart', JSON.stringify(raw))
  window.dispatchEvent(new CustomEvent('cart-updated'))
  toast.success('已加入购物车')
}

// 图片加载失败兜底：回退到内置图标，避免破图影响观感
function onImgError(e){ e.target.src = '/images/apple.svg' }

// 根据商品名称粗略判断所属类目，用于筛选与展示类目徽标
// 后端不可用时的回退类目（用于保证页面可用性）
const DEFAULT_CATEGORIES = [
  { id: 'apple', name: '苹果', desc: '脆甜可口' },
  { id: 'banana', name: '香蕉', desc: '香糯软糯' },
  { id: 'orange', name: '橙子', desc: '多汁清爽' },
  { id: 'kiwi', name: '猕猴桃', desc: 'VC满满' },
  { id: 'berry', name: '莓果', desc: '酸甜滋味' },
  { id: 'mango', name: '芒果', desc: '香甜浓郁' },
]
function categoryOf(p){
  // 优先使用后端下发的分类ID，确保与类目筛选匹配
  if (p && p.categoryId != null) return String(p.categoryId)
  const n = p.name || ''
  if (n.includes('苹果') || n.includes('富士')) return 'apple'
  if (n.includes('猕猴桃') || n.includes('奇异果')) return 'kiwi'
  if (n.includes('芒')) return 'mango'
  if (n.includes('橙')) return 'orange'
  if (n.includes('香蕉')) return 'banana'
  if (n.includes('莓') || n.includes('葡萄') || n.includes('车厘')) return 'berry'
  return 'berry'
}

// 选择类目：再次点击同一类目则清空选择，实现开/关切换
function selectCategory(id){ selectedCategory.value = selectedCategory.value===id ? '' : id }
</script>